---
type: tutorial
unitTitle: Construa e projete com componentes de UI Astro
title: 'Check in: Unidade 3 - Componentes'
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Construa componentes Astro para reutilizar código entre elementos comuns através do seu website
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Agora que você tem arquivos `.astro` e `.md` gerando páginas inteiras no seu website, é hora de fazer e reutilizar pequenos pedaços de HTML com componentes Astro!

## Olhando à frente

Nesta unidade, você irá aprender como criar **componentes Astro** para reutilizar código entre elementos comuns através do seu website. 

Você irá construir:
- Um componente de Navegação que apresenta um menu de links para suas páginas 
- Um componente de Rodapé para incluir no fim de cada página
- Um componente de Rede Social, usado no rodapé, para links de páginas de perfil
- Um componente interativo Hamburger para mostrar a Navegação em dispositivos móveis

Durante o caminho, você utilizará CSS e JavaScript para construir um design responsivo que reage a tamanhos de tela e a interação do usuário.



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu estou pronto para construir alguns componentes Astro!
</Checklist>
</Box>
